<template>
  <GlobalContainer :backgroundImage="`${OSS_URL}/images/baoxiu/head_bg.png`">
    <GlobalHeader title="居家报修" showBack :backgroundImage="`${OSS_URL}/images/baoxiu/head_bg.png`" :fixed="true" />
    <div class="h-full rounded-20 bg-white px-40 py-30">
      <div class="mb-32 flex items-center">
        <image src="../../static/images/tousu/home_icon.png" class="mr-16 size-64" />
        <div class="home-title text-34 leading-56 text-[#303133]">{{ accountStore.roomInfo }}</div>
      </div>
      <div class="form-c">
        <div class="form-item">
          <div class="label">期望上门时间</div>
          <div class="form-input flex items-center">
            <wd-datetime-picker
              v-model="form.expectedStartTime"
              custom-style="width: 100%;"
              custom-view-class="custom-class"
              custom-cell-class="custom-class"
              :formatter="formatter"
              :display-format="displayFormat"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="upload-content flex flex-wrap gap-32">
            <ImageUpload :fileList="fileList" :max="3" @fileListChange="fileListChange" />
          </div>
        </div>
        <div class="form-item">
          <div class="label">留言</div>
          <div class="text-area">
            <wd-textarea
              v-model="form.content"
              placeholder="给处理人留言"
              :maxlength="100"
              custom-class="custom-class"
              custom-textarea-container-class="custom-class"
              custom-textarea-class="custom-class"
              show-word-limit
            />
          </div>
        </div>
      </div>

      <div class="btn-c px-30 py-20 pb-safe">
        <div class="btn" @click="submitHandle">提交</div>
      </div>
    </div>
  </GlobalContainer>
</template>

<script setup>
import { ref } from 'vue'
import ImageUpload from '@/components/imageUpload/index.vue'
import { saveRepairOrder } from '@/common/api/report'
import { useAccountStore } from '@/store'
import { showToast } from '@/utils'
import { format } from 'date-fns'
const OSS_URL = import.meta.env.VITE_OSS_URL
const accountStore = useAccountStore()
const form = ref({
  type: 0,
  expectedStartTime: Date.now(),
  content: '',
  images: []
})
const fileList = ref([])
const fileListChange = list => {
  fileList.value = list
}

const formatter = (type, value) => {
  switch (type) {
    case 'hour':
      return value + '时'
    case 'minute':
      return value + '分'
    default:
      return value
  }
}
const displayFormat = items => {
  return `${items[0].label}年${items[1].label}月${items[2].label}日 ${items[3].label}:${items[4].label}`
}
const submitHandle = () => {
  if (!form.value.expectedStartTime) {
    showToast('请选择期望上门时间')
    return
  }
  if (!fileList.value.length) {
    showToast('请上传图片')
    return
  }
  if (!form.value.content) {
    showToast('请输入留言')
    return
  }
  const params = {
    ...form.value,
    expectedStartTime: format(form.value.expectedStartTime, 'yyyy-MM-dd HH:mm:ss'),
    images: fileList.value.map(item => item).join(',')
  }
  saveRepairOrder(params).then(res => {
    if (res) {
      showToast('提交成功')
      uni.navigateBack()
    } else {
      showToast('提交失败')
    }
  })
}
</script>

<style lang="scss" scoped>
.form-item {
  margin-bottom: 30rpx;
  .label {
    font-weight: 400;
    font-size: 30rpx;
    line-height: 46rpx;
    color: #303133;
    margin-bottom: 16rpx;
  }
  .form-input {
    background: #f5f7fa;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    border: 1px solid #dcdfe6;
  }
  .upload-item {
    background: #fafafa;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 1px solid #dcdfe6;
  }
  :deep(.custom-class) {
    flex: 1;
    width: 100%;
    background: #f5f7fa !important;
    font-size: 30rpx;
    color: #303133;
  }
  :deep(.text-area) {
    background: #f5f7fa;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    border: 1px solid #dcdfe6;
  }
  :deep(.wd-textarea__count) {
    background-color: #f5f7fa;
  }
}

.btn-c {
  position: fixed;
  bottom: 12rpx;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 1;
  .btn {
    height: 94rpx;
    background: #1e90ff;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    text-align: center;
    line-height: 94rpx;
    color: #fff;
    font-size: 32rpx;
  }
}
</style>
